<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Blank Page | Bootstrap Based Admin Template - Material Design</title>
	<%@ include file="layout/styles.jsp" %>
	
	<link href="${pageContext.request.contextPath }/static/plugins/morrisjs/morris.css" rel="stylesheet" />
</head>

<body class="theme-red">
    
    <%@ include file="layout/tools.jsp" %>
    
    <!-- Top Bar -->
    <%@ include file="layout/top.jsp" %>
    <!-- #Top Bar -->
    
    <section>
        <!-- Left Sidebar -->
        <%@ include file="layout/leftsidebar.jsp" %>
        <!-- #END# Left Sidebar -->
        
        <!-- Right Sidebar -->
        <%@ include file="layout/rightsidebar.jsp" %>
        <!-- #END# Right Sidebar -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="block-header">
                <h2>仪表盘</h2>
            </div>
            <!-- 信息展示 -->
            <div class="row clearfix">
            	<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box bg-pink hover-expand-effect">
                        <div class="icon">
                            <i class="material-icons">playlist_add_check</i>
                        </div>
                        <div class="content">
                            <div class="text">系统资源</div>
                            <div class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box bg-cyan hover-expand-effect">
                        <div class="icon">
                            <!-- <i class="material-icons">user</i> -->
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="content">
                            <div class="text">用户</div>
                            <div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div>
                        </div>
                    </div>
                </div>
                
            </div>
    		
    		<div class="row clearfix">
    			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header">
                            <h2>用户增长曲线图</h2>
                            <ul class="header-dropdown m-r--5">
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <i class="material-icons">more_vert</i>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a href="javascript:void(0);">Action</a></li>
                                        <li><a href="javascript:void(0);">Another action</a></li>
                                        <li><a href="javascript:void(0);">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="body">
                            <div id="line_chart" class="graph"></div>
                        </div>
                    </div>
                </div>
    		</div>
    		
        </div>
    </section>

    <%@ include file="layout/scripts.jsp" %>
    
    <script src="${pageContext.request.contextPath }/static/plugins/jquery-countto/jquery.countTo.js"></script>
	
	<script src="${pageContext.request.contextPath }/static/plugins/raphael/raphael.min.js"></script>
    <script src="${pageContext.request.contextPath }/static/plugins/morrisjs/morris.js"></script>
    
    <!-- Demo Js -->
    <script src="${pageContext.request.contextPath }/static/js/demo.js"></script>
    
    <script>
    	$(function(){
        	$('.count-to').countTo();
        	
        	Morris.Line({
        		element: 'line_chart',
        		xkey: 'period',
                ykeys: ['count'],
                labels: ['用户人数', 'Off the road'],
                lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)'],
                lineWidth: 3,
        		data:[{
        			'period': '2011 Q1',
        			'count': 3407
        		},{
        			'period': '2011 Q2',
        			'count': 3607
        		},{
        			'period': '2013',
        			'count': 3707
        		},{
        			'period': '2014',
        			'count': 3907
        		},{
        			'period': '2015',
        			'count': 4407
        		}]
        	});
        	
        	
        	
        	/* $('.menu li').addClass('active'); */
        	
    	});
    
    </script>
</body>

</html>
    